<template>
  <div class="flex justify-center items-center mt-[50px]" ref="more">
    <template v-if="!props.isStop">
      <IconifyIconOnline icon="line-md:loading-loop" />
      <span class="ml-[20px]">加载中....</span>
    </template>
    <span v-else>没有更多啦....</span>
  </div>
</template>

<script setup lang="ts">
import { onBeforeUnmount } from "vue";
import { onMounted, ref } from "vue";
interface Props {
  isStop: boolean;
}
const props = defineProps<Props>();
const emits = defineEmits(["getList"]);
const more = ref(null);
// 是否进入可视区
const options = {
  threshold: 0 //表示当子元素和父元素覆盖多少时触发回调函数。
};
const observer = new IntersectionObserver(entries => {
  if (entries[0].intersectionRatio > 0 && !props.isStop) {
    emits("getList");
  }
}, options);
onMounted(() => {
  observer.observe(more.value);
});
onBeforeUnmount(() => {
  observer.unobserve(more.value);
});
</script>
